<template>
    <section>
        <!-- 搜索 -->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.name" placeholder="姓名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getshops">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd" >新增</el-button>
                     <el-dialog title="新增" :visible.sync="add" scope="scope" style="width:100%" >
  <el-form :model="formDate" :rules="rules" ref="formDate">
      <el-form-item label="商品名" prop="p_name">
                <el-input v-model="formDate.p_name" placeholder="商品名不超过15个字"></el-input>
           </el-form-item>
           <el-form-item label="商品单价" prop="p_price">
               <el-input v-model="formDate.p_price" class="num"></el-input>元
             </el-form-item>
              <el-form-item label="商品详情" prop="p_detailes">
                <el-input v-model="formDate.p_detailes" placeholder="简单介绍下你的项目，不超过40个字"></el-input>
           </el-form-item>
           <el-form-item label="所存数量" prop="p_stock">
               <el-input v-model="formDate.p_stock" class="num"></el-input>
             </el-form-item>
              <el-form-item label="所属公司" prop="p_company">
               <el-input v-model="formDate.p_company"></el-input>
             </el-form-item>
              <el-form-item label="商品样式" prop="p_style">
               <el-input v-model="formDate.p_style" ></el-input>
             </el-form-item>
             <span class="zu">请以这种方式输入：<i class="zushi">颜色:砖红色,浅蓝色,青绿色;样式:大的,小的</i>(其中所有符号为英文符号)</span>
              <el-form-item label="物品图" prop="PackingImage">
                        <el-upload
                            class="upload-demo"
                            action="http://127.0.0.1:8081/admin/uploadImage"
                            :on-success="uploadSuccess"
                          
                            list-type="picture"><!-- on-success是api里的上传成功的钩子；file-list是显示图片 -->
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                            <span class="zushi">第一张图片将用于封面图片</span>
                </el-form-item>
                <el-form-item label="商品概述" prop="PackingImage1">
                        <el-upload
                            class="upload-demo"
                            action="http://127.0.0.1:8081/admin/uploadImage"
                            :on-success="uploadSuccess1"
                          
                            list-type="picture"><!-- on-success是api里的上传成功的钩子；file-list是显示图片 -->
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                </el-form-item>
                <el-form-item label="常见问题" prop="PackingImage2">
                        <el-upload
                            class="upload-demo"
                            action="http://127.0.0.1:8081/admin/uploadImage"
                            :on-success="uploadSuccess2"
                          
                            list-type="picture"><!-- on-success是api里的上传成功的钩子；file-list是显示图片 -->
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                </el-form-item>
                 <el-form-item label="检测报告" prop="PackingImage3">
                        <el-upload
                            class="upload-demo"
                            action="http://127.0.0.1:8081/admin/uploadImage"
                            :on-success="uploadSuccess3"
                          
                            list-type="picture"><!-- on-success是api里的上传成功的钩子；file-list是显示图片 -->
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="add = false">取 消</el-button>
    <el-button type="primary" @click="dateForm()">确 定</el-button>
     <!-- <div>提交</div> -->
  </div>
</el-dialog>
				</el-form-item>
			</el-form>
    </el-col>
    <el-table :data="shops" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60">
			</el-table-column>
            <el-table-column prop="p_img" label="商品图" width="120" sortable>
                
                 <template   slot-scope="scope">            
                    <img :src="scope.row.p_img"  min-width="80" height="80" />
                 </template>         

			</el-table-column>
			<el-table-column prop="p_name" label="商品名" width="120" sortable>
			</el-table-column>
			<el-table-column prop="p_price" label="商品价格" width="100" sortable>
			</el-table-column>
			<el-table-column prop="p_detailes" label="商品详情" width="300" sortable>
			</el-table-column>
            <el-table-column prop="p_stock" label="剩余量" width="100" :formatter="formatsy" sortable>
			</el-table-column>
            <el-table-column prop="p_company" label="所属公司" width="160" sortable>
			</el-table-column>
			<el-table-column label="操作" width="150">
				<template  scope="scope">
					<el-button size="small" @click="dialogFormVisible=true">
                        编辑</el-button>
                        <el-dialog title="编辑" :visible.sync="dialogFormVisible" scope="scope">
  <el-form>
      <el-form-item>
            <span>商品名：</span>
            <el-input type="text" v-model="scope.row.p_name" placeholder="商品名"></el-input>
            <span>商品详情：</span>
            <el-input type="text" v-model="scope.row" placeholder="商品详情"></el-input>
            <span>剩余商品数：</span>
            <el-input type="text" v-model="scope.row.p_stock" placeholder="剩余商品数"></el-input>
         </el-form-item>
        </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm(scope.row.p_detailes,scope.row.p_stock,scope.row.p_id)">确 定</el-button>
     <!-- <div>提交</div> -->
  </div>
</el-dialog>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">
                        删除</el-button>
				</template>
			</el-table-column>
		</el-table>
        <el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
			<el-pagination 
            layout="total, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" 
            :page-size="pagesize"
            :current-page=1
            :total="total" 
            style="float:right;">
			</el-pagination>
		</el-col>
    </section>
</template>

<script>
export default {
data () {
    var validatemin = (rule, value, callback) => {
        if (value === '') {
            // this.ustatus=false;
          callback(new Error('请输入值'));
        } 
         else {
          const reg1 = /^[0-9]+$/;
          console.log(reg1.test(value));
          if (reg1.test(value)) {
            //   this.ustatus=true;
            return callback();
          } else {
            //   this.ustatus=false;
            return callback(new Error('请输入数字'));
          }
        }
      };
        var validateName = (rule, value, callback) => {
        if (value === '') {
            // this.ustatus=false;
          callback(new Error('请输入名称'));
        } 
         else {
          // let reg1 = /^([\u4E00-\u9FA5]|[\uFE30-\uFFA0]|[a-z]|[A-Z])+$/;
          // console.log(reg1.test(value));
          // if (reg1.test(value)) {
            //   this.ustatus=true;
            if(this.formDate.p_name.length<3||this.formDate.p_name.length>15)
             {
               callback(new Error('请输入3-15个字'));  
             }
             else{
                             callback();
             }
          // } else {
            //   this.ustatus=false;
            // return callback(new Error('请输入中文'));
          // }
        }
      };
      var validateIntro = (rule, value, callback) => {
        if (value === '') {
            // this.ustatus=false;
          callback(new Error('请输入简介'));
        } 
         else {
          //  let reg1 = /^([\u4E00-\u9FA5]|[\uFE30-\uFFA0]|[a-z]|[A-Z])+$/;
          // console.log(reg1.test(value));
          // if (reg1.test(value)) {
            //   this.ustatus=true;
            if(this.formDate.p_detailes.length<10||this.formDate.p_detailes.length>42)
             {
               callback(new Error('请输入10-42个字'));  
             }
             else{
                             callback();
             }
          // } else {
            //   this.ustatus=false;
            // return callback(new Error('请输入中文'));
          }
        };
    return {
        filters:{
            name:""
        },
        shops:[],
        page:1,
        listLoading:false,
        sels:[],
        pagesize:10,
        total:0,
        size:6,
         dialogFormVisible: false,
         add:false,
         intro:"",
         introList1:"",
         introList2:[],
         summaryList1:"",
         summaryList2:[],
          problemList1:"",
         problemList2:[],
          reportList1:"",
        reportList2:[],
         filess:"",
         formDate:{
             p_name:"",
             p_price:"",
             p_detailes:"",
             p_stock:"",
             p_company:"",
             p_style:"",
             PackingImage:"",
             PackingImage1:"",
            PackingImage2:"",
            PackingImage3:""


         },
         rules:{
              p_name:{ required: true,trigger: 'blur',validator:validateName },
               p_detailes:{required:true,validator:validateIntro,trigger:'blur'},
               p_stock:{required:true,trigger:"blur",validator:validatemin},
                p_price:{required:true,trigger:"blur",validator:validatemin},
                p_company:{ required: true,trigger: 'blur',validator:validateName },
               
         }
    }
},
created () {
    
},
methods: {
      // 获取用户列表
    getshops()
    {
        console.log(this.filters.name)
        
        let para = {
					page: this.page,
                    limit:this.pagesize,
                    name:this.filters.name
                };
             
                this.listLoading = true;
        this.$axios.post("http://127.0.0.1:8081/admin/productmsg",para)
        .then(res=>
        {
            this.shops=res.data.data;
            this.total=res.data.count
            // console.log(this.total)
            this.listLoading = false;
            // for(let i=0;i<this.shops.length;i++)
            // {
            //     console.log(this.shops[i].p_detailes)
            // }
            // console.log(res.data.data);
            //  console.log("user",this.shops);
        })
       
        
    },
    handleAdd()
    {
       this.add=true;
    },
    submitForm()
    {
        
    },
    selsChange(sels)
    {
        console.log(sels)
        this.sels=sels;
    },
    formatSex(row,column)
    {
        return row.u_sex == 2 ? '男' : row.u_sex == 1 ? '女' : '未知';
    },
    formatsy(row,column)
    {
        return row.p_stock > 0 ? '剩余'+row.p_stock+'件': '已售罄';
    },
    handleEdit(index,row)
    {
        console.log("编辑");
    },
    handleDel(index,row)
    {
        let id=row.p_id;
        // console.log("删除");
        this.$confirm("确认删除选中记录吗？","提示",{
            type: 'warning'
        }).then(()=>
        {
            
            this.listLoading=true;
            let para={p_id:id};
            // para=names;
            this.$axios.post("http://127.0.0.1:8081/admin/delgoods",para).then(res=>
            {
                this.listLoading=false;
                let ress=res.msg
                this.$message({
                    message:res.data.msg,
                    type:"success"
                })
                this.getshops();
            })
           
        }).catch(()=>
        {

        })
    },
    batchRemove()
    {
        let p_id=this.sels.map(item => item.p_id).toString();
        this.$confirm("确认删除选中记录吗？","提示",{
            type: 'warning'
        }).then(()=>
        {
            
            this.listLoading=true;
            let para={p_id:p_id};
            // para=names;
            this.$axios.post("http://127.0.0.1:8081/admin/delgoods",para).then(res=>
            {
                this.listLoading=false;
                let ress=res.msg
                this.$message({
                    message:res.data.msg,
                    type:"success"
                })
                this.getshops();
            })
           
        }).catch(()=>
        {

        })
    },
    handleCurrentChange(val)
    {
        // console.log("val",val);
        this.page = val;
		this.getshops();
    },
    handleSizeChange(val)
    {
        this.page = val;
		this.getshops();
    },
     uploadSuccess(res){
              // console.log(fileList)
              //  var name=file.name;
               console.log(res);
               this.filess="http://127.0.0.1:8081/upload/"+res.data+".png";
               this.introList2.push(this.filess);
               console.log(this.filess)
              //  var uploadImageFalseUrl=res.data.split("/");//获取图片原始路径 /images/packImage/2_2018_7_4_13_22.png         																				this.uploadImageUrl="/"+uploadImageFalseUrl[1]+"/"+uploadImageFalseUrl[2]+"/"+name;//拼接图片原本名字，真实传到后台的路径 res.data.split("/")[1]为images， res.data.split("/")[2]为packImage
            },
            uploadSuccess1(res){
              // console.log(fileList)
              //  var name=file.name;
               console.log(res);
               this.filess="http://127.0.0.1:8081/upload/"+res.data+".png";
               this.summaryList2.push(this.filess);
               console.log(this.filess)
              //  var uploadImageFalseUrl=res.data.split("/");//获取图片原始路径 /images/packImage/2_2018_7_4_13_22.png         																				this.uploadImageUrl="/"+uploadImageFalseUrl[1]+"/"+uploadImageFalseUrl[2]+"/"+name;//拼接图片原本名字，真实传到后台的路径 res.data.split("/")[1]为images， res.data.split("/")[2]为packImage
            },
             uploadSuccess2(res){
              // console.log(fileList)
              //  var name=file.name;
               console.log(res);
               this.filess="http://127.0.0.1:8081/upload/"+res.data+".png";
               this.problemList2.push(this.filess);
               console.log(this.filess)
              //  var uploadImageFalseUrl=res.data.split("/");//获取图片原始路径 /images/packImage/2_2018_7_4_13_22.png         																				this.uploadImageUrl="/"+uploadImageFalseUrl[1]+"/"+uploadImageFalseUrl[2]+"/"+name;//拼接图片原本名字，真实传到后台的路径 res.data.split("/")[1]为images， res.data.split("/")[2]为packImage
            },
              uploadSuccess3(res){
              // console.log(fileList)
              //  var name=file.name;
               console.log(res);
               this.filess="http://127.0.0.1:8081/upload/"+res.data+".png";
               this.reportList2.push(this.filess);
               console.log(this.filess)
              //  var uploadImageFalseUrl=res.data.split("/");//获取图片原始路径 /images/packImage/2_2018_7_4_13_22.png         																				this.uploadImageUrl="/"+uploadImageFalseUrl[1]+"/"+uploadImageFalseUrl[2]+"/"+name;//拼接图片原本名字，真实传到后台的路径 res.data.split("/")[1]为images， res.data.split("/")[2]为packImage
            },
            dateForm()
            {
                if(this.formDate.p_name&&this.formDate.p_price&&this.formDate.p_detailes&&this.formDate.p_stock&&this.formDate.p_company)
                {
                    let img=this.introList2.slice(0,1);
                    this.introList1=JSON.stringify(this.introList2);
                    this.introList1=this.introList1.substr(1,this.introList1.length-2);
                    this.introList1=this.introList1.replace(/\"/g, "");
                      this.summaryList1=JSON.stringify(this.summaryList2);
                    this.summaryList1=this.summaryList1.substr(1,this.summaryList1.length-2);
                    this.summaryList1=this.summaryList1.replace(/\"/g, "");
                     this.problemList1=JSON.stringify(this.problemList2);
                    this.problemList1=this.problemList1.substr(1,this.problemList1.length-2);
                    this.problemList1=this.problemList1.replace(/\"/g, "");
                    this.reportList1=JSON.stringify(this.reportList2);
                    this.reportList1=this.reportList1.substr(1,this.reportList1.length-2);
                    this.reportList1=this.reportList1.replace(/\"/g, "");
                    img=JSON.stringify(img);
              img=img.substr(2,img.length-4);
              console.log({ p_name:this.formDate.p_name,
                     p_img:img,
                     p_detailes:this.formDate.p_detailes,
                     p_price:this.formDate.p_price,
                     p_stock:this.formDate.p_stock,
                     p_company:this.formDate.p_company,
                     p_imgs:this.introList1,
                     p_problem:this.problemList1,
                     p_report:this.reportList1,
                     p_summary:this.summaryList1,
                     p_style:this.formDate.p_style})
                 this.$axios.post("http://127.0.0.1:8081/admin/addproduct",{
                     p_name:this.formDate.p_name,
                     p_img:img,
                     p_detailes:this.formDate.p_detailes,
                     p_price:this.formDate.p_price,
                     p_stock:this.formDate.p_stock,
                     p_company:this.formDate.p_company,
                     p_imgs:this.introList1,
                     p_problem:this.problemList1,
                     p_report:this.reportList1,
                     p_summary:this.summaryList1,
                     p_style:this.formDate.p_style

                 }).then(res=>
                 {
                     console.log(res.data);
                     this.$message({
                message: res.data.msg,
                type: res.data.status
                });
                this.add=false;
                 })
                    
                }
                  else{
                 this.$message({
                message: '请填完所有信息',
                type: 'warning'
                });
              }
            }
},
mounted () {
    this.getshops();
}
}
</script>

<style>
.el-table_1_column_5  .cell{
    text-align: center;
    /* color: red; */
}
.num{
  width: 100px !important;
}
.el-input,.el-textarea{
  margin-left: 10px;
  margin-right: 10px;
  /* width: 600px; */
}
.el-dialog{
    width: 80%;
}
.el-form-item{
    margin-bottom: 20px !important;
}
.el-form-item__label{
    width: 100px !important
}
.zushi{
  color: red;
  font-size: 12px;
}
.zu{
    font-size: 12px;
}
</style>
